<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../component/layui/css/layui.css" rel="stylesheet" />
		<link href="../../admin/css/pearCommon.css" rel="stylesheet" />
	</head>
	<body>
		<body class="pear-container">
		    <div class="layui-card">
		        <div class="layui-card-body">
		            <form action="" class="layui-form">
		                <div class="layui-form-item">
							<div class="layui-col-md6">
								<select lay-verify="" name="city">
									<option value="">请选择添加一种要素类型</option>
									<option value="01">自定义要素</option>
									<option value="02">地图服务要素</option>
									<option value="03">业务要素</option>
									<option value="04">空间模型</option>
								</select>
							</div>
		                    <label class="layui-form-label">要素名称</label>
							<div class="layui-input-inline">
								<input class="layui-input" id="demoReload"  name="elementName" placeholder="" type="text">
							</div>
							<a class="pear-btn pear-btn-md pear-btn-primary" data-type="reload" id="featureSearch" lay-filter="user-query" lay-submit>
								<i class="layui-icon layui-icon-search"></i>
								查询
							</a>
		                    <button class="pear-btn pear-btn-md" type="reset">
		                        <i class="layui-icon layui-icon-refresh"></i>
		                        重置
		                    </button>
		                </div>
		            </form>
		        </div>
		    </div>
		    <div class="layui-card">
		        <div class="layui-card-body">
		            <table id="user-table" lay-filter="user-table"></table>
		        </div>
		    </div>
		</body>



		<script id="user-enable" type="text/html">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="start">启用</a>
		</script>
		<script id="data-type" type="text/html">
			{{#if (d.serviceType == 1) { }}
			<span>3dTiles</span>
			{{# }else if(d.serviceType == 2){ }}
			<span>geoJson</span>
			{{# }else if(d.serviceType == 3){ }}
			<span>wms</span>
			{{# }else if(d.serviceType == 4){ }}
			<span>wfs</span>
			{{# } }}
		</script>
		<script id="createTime-type" type="text/html">
			<div>{{ layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
		</script>
		<script id="service-status" type="text/html">
			{{#if (d.status == 1) { }}
			<span style="color: #338528;">启用</span>
			{{# }else if(d.status == 0){ }}
			<span>禁用</span>
			{{# } }}
		</script>
		<script id="icon" type="text/html">
			<i class="layui-icon {{d.icon}}"></i>
		</script>
		<!--		新增开始 -->
		<div class="site-text"  id="service-window" style="margin: 5%; display: none"  target="test123">
			<form action=""  class="layui-form" enctype="multipart/form-data" id="fm">
				<div class="layui-form-item">
					<label class="layui-form-label">要素名称</label>
					<div class="layui-input-block">
						<input autocomplete="off" class="layui-input" id="elementName" lay-verify="required"  name="elementName" placeholder="请输入要素名称" required type="text">
						<input id="status" name="status" type="hidden" value="1">
						<div class="layui-form-mid layui-word-aux">必填项</div>
					</div>
				</div>
				<div class="layui-form-item" id="service-type">
					<label class="layui-form-label">要素类型</label>
					<div class="layui-input-block">
						<select id="serviceType" lay-verify="required" name="serviceType">
							<option value=""></option>
							<option value="1">1-3dTiles</option>
							<option value="2">2-geoJson</option>
							<option value="3">3-wms</option>
							<option value="4">4-wfs</option>
						</select>
						<div class="layui-form-mid layui-word-aux">必填项</div>
					</div>
				</div>
				<div class="layui-form-item" id="service-address">
					<label class="layui-form-label">上传shp压缩包</label>
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-primary" id="file" name="file" type="button"><i class="layui-icon"></i>只允许上传zip压缩文件</button>
						<div class="layui-form-mid layui-word-aux">必填项 *请确保单个ZIP文件中有且只有一个（或一组完整的）可识别类型的文件</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">要素描述</label>
					<div class="layui-input-block">
						<textarea class="layui-textarea" id="remark" name="remark" placeholder="请输入要素描述"></textarea>
					</div>
				</div>
			</form>

		</div>
		<!--		新增结束 -->
		<script src="../../component/layui/layui.js"></script>
		<script>
			var cumstomObj = {};
			var chooseFlag =false;
			function json_to_get(sstr ){

				sstr = sstr.replace(/\t/g,"");
				sstr = sstr.replace(/\"/g,"").replace("{","").replace("}","").
				sstr = sstr.replace(",","&").replace(":","=");
				sstr = sstr.replace(/\"/g,"").replace(/{/g,"").replace(/}/g,"")
				sstr= sstr.replace(/,/g,"&").replace(/:/g,"=");
				return sstr;
			}
		    layui.use(['table','form','jquery','upload'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
				let upload = layui.upload;
				let postUrl = '/one/element/local';

		        let MODULE_PATH = "/system/custom/";

		        let cols = [
		            [
		                // {type:'checkbox'},
						{title: '缩略图',field: 'icon',templet:'#icon', align:'center', width:80},
		                // {title: '缩略图', field: 'username', align:'center', width:100},
						{title: '要素分类', field: 'featureType', sort: true,align:'center'},
						{title: '要素名称', field: 'elementName',sort: true, align:'center'},
		                {title: '要素描述', field: 'remark', align:'center'},
						{title: '要素格式', field: 'serviceType', align:'center'},
						{title: '要素状态', field: 'status',sort: true,  align:'center', templet:'#service-status'}
		            ]
		        ]

		        table.render({
					elem: '#user-table',
					url: '../../admin/data/search.json',
					page: true ,
					cols: cols ,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
		        });

		        table.on('tool(user-table)', function(obj){
					var data = obj.data;
					if(obj.event === 'detail'){
                        var elementUrl=" ";
						var jumpUrl=" ";
						var JUMP_PATH = "/jump.html";
						$.ajax({
							url: "/one/element/local/serviceInfo",
							type: "GET",
							data:{id:data.id},
							dataType: "json",
							success: function(da){
								if (da.errorCode === '401') {
									loginStatusIntercept(da.msg)
									return
								}
								elementUrl=da.data.url;
								jumpUrl=JUMP_PATH + '?url='+ elementUrl.substr(elementUrl.indexOf("geoserver")-1)+'&type='+data.serviceType;//url通过geoserver截断解决跨域问题
								window.open(jumpUrl);
							}
						});

		            } else if(obj.event === 'edit'){
						layer.open({
							type: 1,
							title: '修改地图服务要素',
							shade: 0.1,//遮罩透明度
							area: ['60%', '60%'],
							content: $('#service-window'),
							resize: true,
							btn: ['确定', '取消'],
							success:function(layero,index){
								$('#elementName').val(data.elementName);
								$('#serviceType').hide();
								$('#service-address').hide();
								$('#remark').val(data.remark);
							},
							yes:function(index,layero){
								$.ajax({
									url: "/one/element/local",
									type: "PUT",
									data:JSON.stringify({
										elementName: $('#elementName').val(),
										serviceType: $('#serviceType').val(),
										elementUrl: $('#feature-address').val(),
										remark: $('#remark').val(),
										id: data.id,
										status: 1
									}),
									dataType: "json",
									contentType: "application/json; charset=UTF-8",
									success: function(data){
										if (data.errorCode === '401') {
											loginStatusIntercept(data.msg)
											return
										}
										if(data.errorCode==0){
											layer.alert('修改成功',{icon:1,title:'提示'},function(i){
												layer.close(i);
												layer.close(index);//关闭弹出层
												$("#fm")[0].reset()//重置form
											});
											table.reload('user-table',{//重载表格
												page:{
													curr:obj.curr
												}
											})
										}else{
											layer.msg("修改失败", {icon: 5});
										}
									}
								});
							}
						});

		            }else if(obj.event === 'del'){
						layer.confirm('确认删除？', {icon: 3, title:'提示'},function(index){
							// console.log(data);
							let ids = data.id;
							$.ajax({
								url: "/one/element/local",
								type: "DELETE",
								data:{ids:ids},
								dataType: "json",
								success: function(data){
									if (data.errorCode === '401') {
										loginStatusIntercept(data.msg)
										return
									}
									if(data.errorCode==0){
										//删除这一行
										obj.del();
										//关闭弹框
										layer.close(index);
										layer.msg("删除成功", {icon: 6});
									}else{
										layer.msg("删除失败", {icon: 5});
									}
								}
							});
						});
					}

		        });


				$('#featureSearch').on('click', function(){
					var active = {
						reload: function(){
							var demoReload = $('#demoReload');
							//执行重载
							table.reload('user-table', {
								// url:'/one/element/origin/list',
								page: {
									curr: 1 //重新从第 1 页开始
								}
								// ,method: 'post'
								,where: {
									elementName: demoReload.val()
								}
							}, 'data');
						}
					};
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});


		        table.on('toolbar(user-table)', function(obj){
		            if(obj.event === 'add'){
		                cumstomObj.add();
		            } else if(obj.event === 'refresh'){
		                cumstomObj.refresh();
		            } else if(obj.event === 'batchRemove'){
		                cumstomObj.batchRemove(obj);
		            } else if(obj.event === 'view'){
						cumstomObj.view(obj);
					}
		        });


		        form.on('switch(user-enable)', function(obj){
		            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		        });

				form.on('submit(demo1)', function(data){

				});


		        cumstomObj.add = function(){
					layer.open({
						type: 1,
						title: '添加自定义服务要素',
						shade: 0.1,
						area: ['70%', '70%'],
						content: $('#service-window'),
						resize: true,
						btn: ['确定', '取消'],
						success:function(layero,index){
							$('#service-type').show();
							$('#service-address').show();
						},
						yes:function(index,layero){
							let loading = layer.load();
							var formData = new FormData($( "#fm" )[0]);
								$.ajax({
								url: '/one/element/local',
								type:'POST',
								data:formData,
								async:false,
								cache:false,
								contentType: false,
								processData: false,
								success:function(result){
									if (result.errorCode === '401') {
										loginStatusIntercept(result.msg)
										return
									}
									layer.alert(JSON.stringify(result), {
										title: '最终的提交信息'
									});
									layer.close(loading);
									layer.close(index);
									table.reload('user-table');
									if(result.success){
										layer.msg(result.msg,{icon:1,time:1000},function(){
											// table.reload('user-table');
										});

									}else{
										layer.msg(result.msg,{icon:2,time:1000});
									}
								}
							})
						},

					});
				};
				// zip压缩包上传
				upload.render({ //允许上传的文件后缀
					elem: '#file',
					method: 'post', //可选项。HTTP类型，默认post
					url: postUrl, //改成您自己的上传接口
					accept: 'file', //普通文件
					exts: 'zip', //只允许上传压缩文件
					auto: false,
					multiple: false,
					bindAction:"#commit",
					data:{},
					before: function(obj) {
						obj.preview(function(index, file, result){
							if(file.name.length > 0) {
								chooseFlag = true;
							}
						});
						this.data.elementName= $('#elementName').val();//     红色部分等同于 ajax 提交参数的效果 如 {"username":$("username").val()} 以此类推
						this.data.serviceType=$('#serviceType').val();
						this.data.remark=$('#remark').val();
						this.data.status = 1;
					},
					done: function(res){
						layer.msg('上传成功');
						console.log(res)
					}
				});
		        cumstomObj.edit = function(obj){
		            layer.open({
		                type: 1,
		                title: '修改',
		                shade: 0.1,
		                area: ['500px', '400px'],
		                content: '<div style="padding: 20px 100px;">'+ 99 +'</div>'
		            });
				}


				cumstomObj.view = function(obj){
					$.ajax({
						url: '/one/element/local/preview?id=10',
						dataType:'json',
						type:'get',
						success:function(result){
							if (result.errorCode === '401') {
								loginStatusIntercept(result.msg)
								return
							}
							if(result.success){
								console.log(result);
								layer.msg(result.msg,{icon:1,time:1000},function(){
									// obj.del();
								});
							}else{
								layer.msg(result.msg,{icon:2,time:1000});
							}
						}
					})
				}

		        cumstomObj.remove = function(obj){
		            layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
		                    url: MODULE_PATH+"remove/"+obj.data['userId'],
		                    dataType:'json',
		                    type:'delete',
							data:{ids:ids},
		                    success:function(result){
		                        layer.close(loading);
		                        if(result.success){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
		                                obj.del();
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
		                })
		            });
		        }

		        cumstomObj.batchRemove = function(obj){
		            let data = table.checkStatus(obj.config.id).data;
		            if(data.length === 0){
		                layer.msg("未选中数据",{icon:3,time:1000});
		                return false;
		            }
		            let ids = "";
		            for(let i = 0;i<data.length;i++){
		                ids += data[i].id+",";
		            }
		            ids = ids.substr(0,ids.length-1);
		            layer.confirm('此操作不可逆，确定要删除这些数据？', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
		                    url: '/one/element/local',
		                    dataType:'json',
		                    type:'delete',
							data:{ids:ids},
		                    success:function(result){
								if (result.errorCode === '401') {
									loginStatusIntercept(result.msg)
									return
								}
		                        layer.close(loading);
		                        if(result.success){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
		                                table.reload('user-table');
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
		                })
		            });
		        }

		        cumstomObj.refresh = function(param){
		            table.reload('user-table');
		        }
		    })
		</script>
	</body>
</html>
